<template>
  <van-swipe
    class="my-swipe"
    indicator-color="#f50"
 
    :height="188"
    :autoplay="2000"
    :duration="1000"
  >
    <van-swipe-item
    v-for="item in banner" :key="item.id"
    
    >
        <img :src="item.pic" alt="">
    </van-swipe-item>
    

   
  </van-swipe>
</template>

<script>
import { Button } from "vant";
import "@/assets/swiper/swiper.css";
import Swiper from "@/assets/swiper/swiper.js";

export default {
  name: "Banner",
  data() {
    return {
      current: 0,
    };
  },
  props: {
    banner: {
      type: Array,
    },
  },
  methods: {
    onChange(index) {
      this.current = index;
    },

    goDetail(id){
      this.$router.push('/detail/'+id)
    }
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  //  height: 188px;
  color: #fff;
  background-color: #39a9ed;
  >img{
      width: 100%;
      height: 100%;
  }
}
.custom-indicator {
width: 80px;
height: 20px;
// background-color: pink;
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
}
/deep/.van-swipe__indicator{
    width: 20px !important;
    height: 3px !important;
    border-radius: 1.5px;
}
// /deep/.van-swipe__indicators{
//     left: 280px ;

//     transform: translateX(0);
// }
</style>

